<template>
  <div class="zhisuo-station">
    <div class="container">
      <!-- 返回按钮 -->
      <div class="back-button-container">
        <button class="back-button" @click="goBackToHome">
          <i class="fas fa-arrow-left"></i>
          返回首页
        </button>
      </div>
      
      <!-- 头部区域 -->
      <div class="header">
        <div class="logo">
          <i class="fas fa-home"></i>
          <h1>智索驿站</h1>
        </div>
        <p class="subtitle">全国化运营的智能认证与反作弊检测中心</p>
      </div>

      <!-- 主要功能介绍 -->
      <div class="main-features">
        <div class="feature-card primary">
          <div class="feature-icon">
            <i class="fas fa-shield-alt"></i>
          </div>
          <div class="feature-content">
            <h3>反作弊检测系统</h3>
            <p>通过AI智能算法和多重验证机制，确保用户任务完成的真实性和可信度，维护平台公平竞争环境。</p>
            <ul class="feature-list">
              <li>行为模式分析</li>
              <li>时间轨迹验证</li>
              <li>多维度交叉验证</li>
              <li>实时监控预警</li>
            </ul>
          </div>
        </div>

        <div class="feature-card secondary">
          <div class="feature-icon">
            <i class="fas fa-certificate"></i>
          </div>
          <div class="feature-content">
            <h3>证书打印服务</h3>
            <p>为完成任务的用户提供线下实体证书和数字徽章，增强成就感和可信度。</p>
            <ul class="feature-list">
              <li>任务完成证书</li>
              <li>技能认证徽章</li>
              <li>区块链存证</li>
              <li>二维码验证</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 服务流程 -->
      <div class="service-process">
        <h2>服务流程</h2>
        <div class="process-steps">
          <div class="step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h4>任务提交</h4>
              <p>用户完成高级任务后，系统自动提交到智索驿站进行验证</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h4>智能检测</h4>
              <p>AI系统对任务完成过程进行全方位分析，识别异常行为</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h4>人工复核</h4>
              <p>专业团队对可疑案例进行人工复核，确保检测准确性</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h4>证书生成</h4>
              <p>通过验证的任务自动生成数字证书，用户可申请实体打印</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 技术特色 -->
      <div class="tech-features">
        <h2>技术特色</h2>
        <div class="tech-grid">
          <div class="tech-item">
            <i class="fas fa-brain"></i>
            <h4>AI智能分析</h4>
            <p>基于机器学习的用户行为分析，准确识别作弊模式</p>
          </div>
          <div class="tech-item">
            <i class="fas fa-link"></i>
            <h4>区块链存证</h4>
            <p>所有证书和徽章信息上链存储，确保不可篡改</p>
          </div>
          <div class="tech-item">
            <i class="fas fa-clock"></i>
            <h4>实时监控</h4>
            <p>24小时不间断监控，及时发现和处理异常情况</p>
          </div>
          <div class="tech-item">
            <i class="fas fa-mobile-alt"></i>
            <h4>移动端支持</h4>
            <p>支持手机端操作，随时随地查看证书和申请打印</p>
          </div>
        </div>
      </div>

      <!-- 全国布局 -->
      <div class="coverage">
        <h2>全国布局</h2>
        <div class="coverage-content">
          <div class="coverage-text">
            <p>智索驿站终极目标预计在全国绝大部分城市建立服务网点，为用户提供便捷的线下服务。</p>
            <div class="stats">
              <div class="stat">
                <span class="number">1299+</span>
                <span class="label">服务地区</span>
              </div>
              <div class="stat">
                <span class="number">129900+</span>
                <span class="label">服务网点</span>
              </div>
              <div class="stat">
                <span class="number">1000000+</span>
                <span class="label">日均处理</span>
              </div>
            </div>
          </div>
          <div class="coverage-map">
            <div class="map-image">
              <img src="@/assets/static/微信图片_20251001010918_241_13.jpg" alt="全国服务网点分布图" />
            </div>
          </div>
        </div>
      </div>

      
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZhisuoStation',
  mounted() {
    // 设置页面标题
    document.title = '智索驿站 - 智能认证与反作弊检测中心'
  },
  methods: {
    goBackToHome() {
      // 返回到首页
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.zhisuo-station {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f23 100%);
  color: white;
  padding: 2rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.back-button-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  font-weight: 500;
}

.back-button:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.back-button i {
  font-size: 0.9rem;
}

/* 头部区域 */
.header {
  text-align: center;
  margin-bottom: 4rem;
  padding: 3rem 0;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.logo i {
  font-size: 3rem;
  color: #3b82f6;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.logo h1 {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* 主要功能介绍 */
.main-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

.feature-card.primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
}

.feature-card.secondary {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.feature-icon i {
  font-size: 1.5rem;
  color: white;
}

.feature-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.feature-content p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: bold;
}

/* 服务流程 */
.service-process {
  margin-bottom: 4rem;
}

.service-process h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}

.step-content h4 {
  margin-bottom: 0.5rem;
  color: white;
  font-weight: 600;
}

.step-content p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

/* 技术特色 */
.tech-features {
  margin-bottom: 4rem;
}

.tech-features h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.tech-item {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.tech-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.tech-item i {
  font-size: 2.5rem;
  color: #3b82f6;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.tech-item h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.tech-item p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* 全国布局 */
.coverage {
  margin-bottom: 4rem;
}

.coverage h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.coverage-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.coverage-text p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.stat {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.stat .number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 0.5rem;
}

.stat .label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.coverage-map {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-image {
  width: 100%;
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}

.map-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}


/* 联系我们 */
.contact-section {
  text-align: center;
}

.contact-section h2 {
  font-size: 2.5rem;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.contact-item i {
  color: #3b82f6;
  font-size: 1.2rem;
}

.contact-item span {
  color: white;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-features {
    grid-template-columns: 1fr;
  }
  
  .coverage-content {
    grid-template-columns: 1fr;
  }
  
  .stats {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    flex-direction: column;
    align-items: center;
  }
  
  .logo h1 {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
}
</style>
